<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      canvas {
        background-color: black;
      }
    </style>
  </head>
  <body>
    <canvas id="webgl" width="500" height="500"></canvas>
    <script>
      const image = new Image()
      image.src = './test.png' // 必须在同一域名下
      console.log(image)

      const gl = document.getElementById('webgl').getContext('webgl')

      const vertexShaderSource = `
          attribute vec4 a_position;
          // 添加纹理
          attribute vec2 a_texCoord;
  
          // 矩阵
          uniform mat4 u_mat;

          // 变量
          varying vec4 v_color;
          varying vec2 v_texCoord;


          void main() {
              gl_Position = u_mat * a_position;
              v_color =  gl_Position * 0.5 + 0.5;
          }
       `

      const fragmentShaderSource = `
          precision lowp float;
          varying vec4 v_color;
          varying vec2 v_texCoord;
          // 纹理
        // uniform sampler2D u_image;

          void main() {
                // 在纹理上寻找对应颜色值
                gl_FragColor = v_color;
          }
      `

      const program = initShader(gl, vertexShaderSource, fragmentShaderSource)
      const aposlocation = gl.getAttribLocation(program, 'a_position')
      const matlocation = gl.getUniformLocation(program, 'u_mat')
      // 找到纹理的地址
      const texCoordLocation = gl.getAttribLocation(program, 'a_texCoord')
      const texCoordBuffer = gl.createBuffer()
      gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer)
      gl.bufferData(
        gl.ARRAY_BUFFER,
        new Float32Array([0.2, 0.2, 1.0, 0.1, 0.2, 1.0]),
        gl.STATIC_DRAW
      )
      gl.enableVertexAttribArray(texCoordLocation)
      gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0)
      // 创建纹理
      const texture = gl.createTexture()
      gl.bindTexture(gl.TEXTURE_2D, texture)
      // 设置参数，让我们可以绘制任何尺寸的图像
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)

      // 将图像上传到纹理
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image)

      const data = new Float32Array([0.0, 0.0, -0.3, -0.3, 0.3, -0.3])
      const buffer = gl.createBuffer()
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
      gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW)

      gl.enableVertexAttribArray(aposlocation)
      gl.vertexAttribPointer(aposlocation, 2, gl.FLOAT, false, 0, 0)

      let Tx = 0.1 //x坐标的位置
      let Ty = 0.1 //y坐标的位置
      let Tz = 1.0 //z坐标的位置
      let Tw = 1.0 //差值
      let isOver = true
      let step = 0.05
      function run() {
        if (Tx >= 2) {
          isOver = false
        }
        if (Tx <= 0) {
          isOver = true
        }
        if (isOver) {
          Tx += step
          Ty += step
        } else {
          Tx -= step
          Ty -= step
        }

        const mat = new Float32Array([
          Tx,
          0.0,
          0.0,
          0.0,
          0.0,
          Ty,
          0.0,
          0.0,
          0.0,
          0.0,
          Tz,
          0.0,
          0.0,
          0.0,
          0.0,
          1.0,
        ])
        gl.uniformMatrix4fv(matlocation, false, mat)
        gl.drawArrays(gl.TRIANGLES, 0, 3)

        // 使用此方法实现一个动画
        requestAnimationFrame(run)
      }
      run()

      function initShader(gl, vertexShaderSource, fragmentShaderSource) {
        const vertexShader = gl.createShader(gl.VERTEX_SHADER)
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)

        gl.shaderSource(vertexShader, vertexShaderSource)
        gl.shaderSource(fragmentShader, fragmentShaderSource)

        gl.compileShader(vertexShader)
        gl.compileShader(fragmentShader)

        const program = gl.createProgram()

        gl.attachShader(program, vertexShader)
        gl.attachShader(program, fragmentShader)

        gl.linkProgram(program)

        const success = gl.getProgramParameter(program, gl.LINK_STATUS)
        if (success) {
          gl.useProgram(program)
          return program
        }
        console.error(gl.getProgramInfoLog(program), 'test---')
        gl.deleteProgram(program)
      }
    </script>
  </body>
</html>
